<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<meta charset="utf-8" />
<title>分时</title>
<script type="text/javascript" src='utils/Util.js'></script>
<script type="text/javascript" src='utils/GlobalFunction.js'></script>
<script type="text/javascript" src='common/Painter.js'></script>
<script type="text/javascript" src='common/LinePainter.js'></script>
<script type="text/javascript" src='common/VolumePainter.js'></script>
<script type="text/javascript" src='common/xAxis.js'></script>
<script type="text/javascript" src='common/yAxis.js'></script>
<script type="text/javascript" src='common/Tip_m.js'></script>
<script type="text/javascript" src='common/CrossLines.js'></script>
<script type="text/javascript" src='common/Slider_m.js'></script>
<script type="text/javascript" src='views/FenshiChart_m.js'></script>
<script type="text/javascript" src='views/klineChart_m.js'></script>
<script type="text/javascript" src='events/ChartTouchEvent.js'></script>

<link rel="stylesheet" href="styles/style.css">


</style>
</head>
<body>
	<div>
		<div class="stocktab">
			<div id='curprice'>-</div>
			<div id="priceChange">
				<span id="zhangdie">涨跌</span> <span id="zhangdiefu">涨跌幅</span>
			</div>
			<div class="tab">
				<ul>
					<li id="tab1" ontouchend='setTab(1,2)'>分时</li>
					<li id="tab2" class="on" ontouchend='setTab(2,1)'>K线</li>
				</ul>
			</div>
		</div>
		<div class="content">
			<span class='textkey'>总手</span><span class='textvalue' id='volume'>0000</span>
			<span class='textkey'>最高</span><span class='textvalue' id='maxPrice'>1111</span></br>
			<span class='textkey' id="average">换手</span><span class='textvalue'
				id="turnover">0000</span> <span class='textkey'>最低</span><span
				class='textvalue' id='minPrice'>1111</span></br> <span id="time"
				style="font-size: 12px;">时间</span>
		</div>
	</div>
	<div id="fs" style="clear: both; display: block;">
		<div class='params' id='first'>
			<span class='maValue' id='averagePrice'>均价 10.00</span> <span
				class='maValue' id='curPrice'>现价 10.00</span> <span class='maValue'
				id='curVolume'>总手 10000.00</span>
		</div>
	</div>
	<div id="kl" style="clear: both; display: none;">
		<div class='params' id='first'>
			<span class='param' id='open'></span> <span class='param' id='high'></span>
			<span class='param' id='low'></span> <span class='param' id='close'></span>
		</div>
		<div class='params' id='second'>
			<span class='maValue' id='ma5'></span> <span class='maValue'
				id='ma10'></span> <span class='maValue' id='ma20'></span>
		</div>
	</div>

	<div class="tabList">
		<div id="chart_1" style="clear: both; overflow-y: auto; margin: 10px;">
			<canvas id="canvasFS" style="z-index: 2;">
	        <p>哇哦,您的浏览器不支持html5，太out了吧~换个浏览器吧，比如chrome，firefox</p>
			</canvas>
		</div>
		<div id="chart_2"
			style="clear: both; display: none; overflow-y: auto; margin: 10px;">
			<canvas id="canvasKL" style="z-index: 2;">
	        <p>哇哦,您的浏览器不支持html5，太out了吧~换个浏览器吧，比如chrome，firefox</p>
			</canvas>
		</div>
	</div>

	<script type="text/javascript" src='views/Fenshi_m.js'></script>
	<script type="text/javascript" src='vo/FenshiData.js'></script>
	<script type="text/javascript" src='views/kline_m.js'></script>
	<script type="text/javascript" src='vo/KLineData.js'></script>
	<script type="text/javascript" src='vo/config.js'></script>
	<script type="text/javascript">
		
	</script>

	<script type="text/javascript">
		/**
		info 数据类型: 格式 {1}_{2}_{3}
		{1}  vm 当日分时数据
		     vh 历史分时数据
		     vft 历史资金推送数据
		     vf 历史资金数据
		     k k线数据
		     kt k线实时推送数据
		     va 个股历史收盘价
		{2}  sh 上证
		     sz 深证
		     fd 基金
		     qh 期货市场
		     gwsp 国外商品
		     bk 同花顺板块     
		{3} 代码	
		fq 是否复权 默认 为空不复权 （b 向后， q 向前）
		 */
		var fsDataOptions = {
			canvas : $id('canvasFS'),
			code : '600983',
			starttime : '0930', // 09:30 开盘时间
			fq : '',
			duration : 60 * 1000,
			updateTip : function(obj) {
				var date = new Date();
				$id('time').innerHTML = date.getFullYear() + '-'
						+ (date.getMonth() + 1) + '-' + date.getDate() + '  '
						+ obj.time;
				$id('averagePrice').innerHTML = obj.average.toFixed(2);
				$id('curPrice').innerHTML = obj.price.toFixed(2);
				$id('curVolume').innerHTML = obj.volume;
				$id("fs").style.display = "block";
				$id("kl").style.display = "none";
			},
            setInitTip:function(obj){
                console.log(obj);
             	document.getElementById("average").innerHTML = obj.average;
// 				$id('curPrice').innerHTML = obj.price.toFixed(2);
// 				$id('curVolume').innerHTML = obj.volume; 
          	}
		};
		var klDataOptions = {
			canvas : $id('canvasKL'),
			code : '002190',
			start : '20130101',
			type : 'stock_day',//'stock_day', /* 日K线 */
			ktype : {},
			fq : '', /* 是否复权， 为空不复权 （b 向后， q向前 */
			updateTip : function(obj) {
				$id('zhangdie').innerHTML = String(obj.zhangdie);
				$id('zhangdiefu').innerHTML = String(obj.zhangdiefu);
				$id('time').innerHTML = convertDate(obj.date, false);
				$id('volume').innerHTML = obj.volume;
				$id("fs").style.display = "none";
				$id("kl").style.display = "block";
				$id('open').innerHTML = '开  ' + obj.open.toFixed(2);
				$id('high').innerHTML = '高  ' + obj.high.toFixed(2);
				$id('low').innerHTML = '低  ' + obj.low.toFixed(2);
				$id('close').innerHTML = '收  ' + obj.close;
				$id('ma5').innerHTML = parseFloat(obj.MA5).toFixed(2) ? parseFloat(
						obj.MA5).toFixed(2)
						: '-';
				$id('ma10').innerHTML = parseFloat(obj.MA10).toFixed(2) ? parseFloat(
						obj.MA10).toFixed(2)
						: '-';
				$id('ma20').innerHTML = parseFloat(obj.MA20).toFixed(2) ? parseFloat(
						obj.MA20).toFixed(2)
						: '-';
			}
		};

		var fenshiData = new FenshiData(fsDataOptions, fsOptions);

		var kData = new klData(klDataOptions, klOptions);

		var isVisable = false;
		function setTab(m, n) {
			if (m == 2 && !isVisable) {
				isVisable = true;
				$id('kl').style.display = 'block';
				$id('fs').style.display = 'none';
				$id('open').innerHTML = "开 10.00";
				$id('high').innerHTML = "高 10.00";
				$id('low').innerHTML = "低 10.00";
				$id('close').innerHTML = "收 10.00";
				$id('ma5').innerHTML = "MA5 10.00";
				$id('ma10').innerHTML = "MA10 10.00";
				$id('ma20').innerHTML = "MA20 10.00";
				kData = null;
				kData = new klData(klDataOptions, klOptions);

				kData.init();

				if (fenshiData) {
					fenshiData.stopRefresh(fenshiData.t);
				}
			} else if (m == 1) {
				$id('kl').style.display = 'none';
				$id('fs').style.display = 'block';
				isVisable = false;

				if (fenshiData) {
					var code = fsDataOptions.code;
					var firstLetter = code.substr(0, 1);
					var info = 'vm_';
					if(firstLetter == '6' || firstLetter == '9') {
						info += 'sh_';
					} else if(firstLetter == '0' || firstLetter == '2' || firstLetter == '3') {
						info += 'sz_';
					} else {
						info += 'sh_';
					}
					info += code;
					if(code.substr(0, 1) == '1' || code.substr(0, 3) == "399" || code.substr(0, 1) == "0" || code.substr(0, 1) == "8") {
						fsOptions.needPaintAvgPriceLine = false;
					}
					fenshiData.refresh(fenshiData.url, info);
				}
			}
			var showDiv = $id("chart_" + m);
			var hideDiv = $id("chart_" + n);
			showDiv.style.display = "block";
			hideDiv.style.display = "none";
			var menu1 = $id('tab' + m);
			var menu2 = $id('tab' + n);
			menu1.className = "";
			menu2.className = "on";
		}
	</script>
</body>
</html>
